<template>
  <div class="goods-info" @click="goGoodsPage()">
    <div class="goods-image">
      <img v-lazy="GoodsImage" width="90%" />
    </div>
    <div class="goods-name">{{GoodsName}}</div>
    <div class="goods-price">￥{{GoodsPrice | moneyFilter}}</div>
  </div>
</template>

<script>
import toMoney from '@/filters/moneyFilter.js'
export default {
  name: 'GoodsInfo',
  props: ['GoodsImage', 'GoodsName', 'GoodsPrice', 'goodsId'],
  filters: {
    moneyFilter(money) {
      return toMoney(money);
    },
  },
  methods: {
    goGoodsPage() {   // 点击商品，跳转到商品详情页
      this.$router.push({name:'Goods', query:{goodsId:this.goodsId}})
    },
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/common.styl';
.goods-info {
  font-size: $font1;
  background-color: #ffffff;
  margin-bottom: .8rem;
  div {
    text-align: center;
  }
  .goods-name {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
  }
}
</style>